<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fater {
            position: relative;
            margin: 100px auto;
            width: 500px;
            height: 250px;
            background-color: purple;
        }

        .son {
            position: absolute;
            top: 35px;
            left: 100px;
            width: 300px;
            height: 180px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="fater">
        <div class="son"></div>
    </div>
    <script>
        //   常见事件的属性和方法 
        //   阻止冒泡 dom推荐标准 stopPropagation()  阻止当前事件对象冒泡 其他目标阶段到冒泡不受影响
        //   例如son阻止冒泡后点击后不会在冒泡到fater和document 但是fater和document并没有阻止冒泡 所以点击fater 他会继续冒泡到document 
        // var son = document.querySelector('.son')
        // var fater = document.querySelector('.fater')
        // fater.addEventListener('click', function () {
        //     alert('fater')
        // }, false)
        // son.addEventListener('click', function (e) {
        //     alert('son')
        //     e.stopPropagation()//son执行完后 不在执行冒泡
        // }, false)
        // document.addEventListener('click', function () {
        //     alert('document')
        // // })

        // 传统注册事件 e.stopPropagation()阻止冒泡也可使用
        // var son = document.querySelector('.son')
        // var fater = document.querySelector('.fater')
        // fater.onclick = function() {
        //     alert('fater')
        // }
        // son.onclick = function(e) {
        //     alert('son')
        //     e.stopPropagation()
        // }
        // document.onclick = function() {
        //     alert('document')
        // }

    </script>
</body>

</html>